<template>
  <!-- 按钮 -->
  <div v-if="element.type === 'button'" class="item item-flex">
    <div class="title"></div>
    <el-button disabled>
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </el-button>
  </div>
  <!-- 单行文本 -->
  <div
    v-if="['single-input', 'number', 'amount'].includes(element.type)"
    class="item item-flex"
  >
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-input
      class="sky-item"
      :placeholder="element.options.placeholder"
      :model-value="element.options.defaultValue"
      disabled
    >
      <template v-if="element.options.appendSlot" #append>{{
        element.options.appendSlotContent
      }}</template>
    </el-input>
  </div>
  <!-- 多行文本 -->
  <div v-if="element.type === 'textarea'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-input
      class="sky-item"
      type="textarea"
      :placeholder="element.options.placeholder"
      :model-value="element.options.defaultValue"
      disabled
    />
  </div>
  <!-- 描述说明 -->
  <div v-if="element.type === 'explain'" class="explain">
    {{ element.options.defaultValue }}
  </div>
  <!-- 描述文本 -->
  <div v-if="element.type === 'desc'" class="desc">
    <span
      :style="{
        fontSize: `${element.options.defaultValue}px`,
        fontWeight: element.isBold ? 600 : 400,
      }"
      >{{ element.name }}</span
    >
  </div>
  <!-- 分割线 -->
  <div v-if="element.type === 'divider'" class="divider-wrap">
    <el-divider>
      {{ element.name }}
    </el-divider>
  </div>
  <!-- 部门 -->
  <div v-if="element.type === 'section'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div class="section">
      <el-icon><Plus /></el-icon>
    </div>
  </div>
  <!-- 单选框组 -->
  <div v-if="element.type === 'radio'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-radio-group
      :class="
        element.options.layout === '垂直布局'
          ? 'radio-verticel'
          : 'radio-horizontal'
      "
      :model-value="element.options.defaultValue"
      disabled
    >
      <template v-for="item in element.options.child" :key="item.label">
        <el-radio :label="item.label">{{ item.content }}</el-radio>
      </template>
    </el-radio-group>
  </div>
  <!-- 多选框组 -->
  <div v-if="element.type === 'checkbox'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-checkbox-group
      :class="
        element.options.layout === '垂直布局'
          ? 'radio-verticel'
          : 'radio-horizontal'
      "
      :model-value="element.options.defaultValue"
      disabled
    >
      <template v-for="item in element.options.child" :key="item.label">
        <el-checkbox :label="item.label">{{ item.content }}</el-checkbox>
      </template>
    </el-checkbox-group>
  </div>
  <!-- 下拉框组 -->
  <div
    v-if="['single-select', 'multiple-select'].includes(element.type)"
    class="item item-flex"
  >
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-select
      :placeholder="element.options.placeholder"
      size="large"
      :model-value="element.options.defaultValue"
      disabled
    >
      <el-option
        v-for="item in element.options.child"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
  <!-- 日期选择器 -->
  <div v-if="element.type === 'date'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div class="flex-row">
      <el-date-picker
        style="flex: 1; margin-right: 10px"
        type="date"
        :placeholder="element.options.placeholder"
        value-format="YYYY-MM-DD"
        disabled
      />
    </div>
  </div>
  <!-- 时间日期选择器 -->
  <div v-if="element.type === 'datetime'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-date-picker
      type="datetime"
      :placeholder="element.options.placeholder"
      :value-format="element.options.dateFormat"
      disabled
    />
  </div>
  <!-- 日期区间 -->
  <div v-if="element.type === 'date-range'" class="item item-flex">
    <!-- <template v-for="i in 2" :key="i"> -->
    <div class="title">
      <span class="require-icon" v-if="element.options.required">
        {{ element.name }}
      </span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-date-picker
      style="width: 100%; margin-bottom: 5px"
      type="datetimerange"
      :placeholder="element.options.placeholder"
      :value-format="element.options.dateFormat"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      disabled
    />
    <!-- </template> -->
    <div class="title">
      <span class="require-icon" v-if="element.options.required">
        {{ element.options.label3 }}
      </span>
      <span v-else>
        {{ element.options.label3 }}
      </span>
    </div>
    <el-input
      class="sky-item"
      :placeholder="element.options.label3Placeholder"
      disabled
    >
      <template v-if="element.options.appendSlot" #append>{{
        element.options.appendSlotContent
      }}</template>
    </el-input>
  </div>
  <!-- 时间选择器 -->
  <div v-if="element.type === 'time'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-time-picker
      type="datetime"
      :placeholder="element.options.placeholder"
      :format="element.options.dateFormat"
      disabled
    />
  </div>

  <!-- 时间选择器 -->
  <div v-if="element.type === 'time-range'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-time-picker
      type="datetime"
      is-range
      :placeholder="element.options.placeholder"
      :format="element.options.dateFormat"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      disabled
    />
  </div>
  <!-- 图片 -->
  <div v-if="element.type === 'upload-picture'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-upload
      style="width: 50px; height: 50px"
      list-type="picture-card"
      disabled
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
  </div>
  <!-- 文件 -->
  <div v-if="element.type === 'upload-file'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-upload class="upload-file" disabled>
      <el-button style="width: 100%" disabled>
        <el-icon><Upload /></el-icon>
        上传文件
      </el-button>
    </el-upload>
  </div>
  <!-- 自定义组件 -->
  <div v-if="element.type === 'customComponents'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <slot :name="element.options.slotName">
      <div>{{ element.options.slotName }}</div>
    </slot>
  </div>

  <div v-if="element.type === 'layout'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div>
      <draggable
        class="container"
        :list="element.items"
        group="form"
        :options="{ animation: 300, chosenClass: 'choose', sort: true }"
        @add="dragDown"
        @end="dragEnd"
        @change="handleDragChange"
      >
        <template #item="{ element, index }">
          <div
            @click.stop="handleClick(element, index)"
            :class="[
              'el',
              { active: selectFormItem && selectFormItem.id === element.id },
            ]"
          >
            <element-comp :element="element" />
            <div>
              <el-icon class="icon" @click.stop="removeAt(index)">
                <Delete />
              </el-icon>
              <!-- <DeleteIcon class="icon" @click.stop="removeAt(index)" /> -->
            </div>
          </div>
        </template>
        <template #footer>
          <div class="drag-tip">
            <!-- <MoveIcon class="tip-icon" /> -->
            <span>点击或拖拽左侧控件至此处</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>

  <div v-if="element.type === 'table'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div>
      <draggable
        class="container"
        :list="element.columns"
        group="form"
        :options="{ animation: 300, chosenClass: 'choose', sort: true }"
        @add="dragDown"
        @end="dragEnd"
        @change="handleDragChange"
      >
        <template #item="{ element, index }">
          <div
            @click.stop="handleClick(element, index)"
            :class="[
              'el',
              { active: selectFormItem && selectFormItem.id === element.id },
            ]"
          >
            <element-comp :element="element" />
            <div>
              <el-icon class="icon" @click.stop="removeTableAt(index)">
                <Delete />
              </el-icon>
              <!-- <DeleteIcon class="icon" @click.stop="removeAt(index)" /> -->
            </div>
          </div>
        </template>
        <template #footer>
          <div class="drag-tip">
            <!-- <MoveIcon class="tip-icon" /> -->
            <span>点击或拖拽左侧控件至此处</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>
<script setup>
import elementComp from "./ElementComps.vue";
import draggable from "vuedraggable";
import { ref, watch, toRefs } from "vue";
const props = defineProps(["element"]);
const { element } = toRefs(props);
const emits = defineEmits(["currentItemClick"]);
const currentIndex = ref(0);
const selectFormItem = ref(null);
const showOperate = ref(false);
import { useStore } from "vuex";
const store = useStore();

const handleClick = (element, index) => {
  console.log("复活甲发哈客服哈会计法哈法合法", JSON.stringify(element), index);
  store.dispatch("form/selectFormItem", element);
  currentIndex.value = index;
  showOperate.value = true;
  emits("currentItemClick", element);
};

const dragDown = () => {
  console.log("拖拽放下触发---------------->", JSON.stringify(props.element.items));
    // store.dispat     ch("form/updateConfig", props.element);
  // formStore.updateConfig(newList.value)
  // console.log("拖拽开始---------");
};

// 拖拽结束
const dragEnd = () => {
  console.log("拖拽结束------------");
};

// 移出组件
const removeAt = (index) => {
  console.log("移出组件" + JSON.stringify(element.value));
  element.value.items.splice(index, 1);
  emits("currentItemClick", {});
  // store.dispatch("form/updateConfig", element);
  //store.commit("updateConfig", newList.value);
  // formStore.updateConfig(newList.value)
};

// 移出组件
const removeTableAt = (index) => {
  console.log("移出表格组件" + JSON.stringify(element.value));
  element.value.columns.splice(index, 1);
  emits("currentItemClick", {});
  // store.dispatch("form/updateConfig", element);
  //store.commit("updateConfig", newList.value);
  // formStore.updateConfig(newList.value)
};

/**
 * 获取表单id
 */
const getFormId = () => {
  return `form_${new Date().getTime().toString().substring(5)}${Math.round(
    Math.random() * 9000 + 1000
  )}`;
};

const handleDragChange = (e) => {
  console.log("handleDragChange------------------>e", e);
  if (e.added) {
    // 组件添加
    const element = e.added.element;
    const index = e.added.newIndex;
    element.id = getFormId(); // 使每个组件的字段名都不一样，避免同个组件字段名一样
    handleClick(element, index);
    return;
  }

  if (e.moved) {
    // 组件移动
    const element = e.moved.element;
    const index = e.moved.newIndex;
    handleClick(element, index);
    return;
  }
};

const getSelectedClass = (cp) => {
  return selectFormItem.value && selectFormItem.value.id === cp.id
    ? "border-left: 4px solid #f56c6c"
    : "";
};
watch(
  () => store.state.form.selectFormItem,
  (newVal) => {
    selectFormItem.value = newVal;
    console.log("selectFormItem---------watch------->", newVal);
    //   formStore.updateConfig(newVal)
  }
);
</script>

<style lang="less" scoped>
.mr-0 {
  margin-right: 0;
}

.item-flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  font-size: 14px;
  color: #1d2129;
  .title {
    display: inline-block;
    margin-bottom: 8px;
    .require-icon {
      position: relative;
      &::after {
        content: "*";
        position: absolute;
        left: 100%;
        top: -2px;
        line-height: 20px;
        padding-left: 2px;
        color: #f54a45;
      }
    }
  }
  .sky-item {
    flex: 1;
  }

  .section {
    width: 44px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 13px;
    border: 1px solid #82a7fc;
    box-sizing: border-box;
    position: relative;
  }
}
.item {
  padding: 5px;
  margin-bottom: 18px;
}
.flex-row {
  display: flex;
  align-items: center;
}

.explain {
  width: 100%;
  font-size: 14px;
  line-height: 22px;
  color: #646a73;
  padding: 3px 12px;
  word-break: break-word;
  background-color: rgba(31, 35, 41, 0.05);
}

.desc {
  width: 100%;
  font-size: 14px;
  line-height: 22px;
  color: #646a73;
  padding: 3px 12px;
  word-break: break-word;
}

.divider-wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

// 单选框
.radio-verticel {
  display: flex;
  flex-direction: column;
  align-items: initial;
  position: relative;
  // top: -5px;
}
.radio-horizontal {
  position: relative;
  // top: -5px;
}

// 下拉选择框
.dropdown-link {
  cursor: pointer;
  color: #606266;
  display: flex;
  align-items: center;
}

.dropdown-input {
  :deep(.el-input__inner) {
    cursor: pointer;
  }
}
// 上传文件
.upload-file {
  :deep(.el-upload--text) {
    width: 100%;
  }
}

:deep(.el-upload--picture-card) {
  width: 60px;
  height: 60px;
}
</style>
<style lang="less">
.el-popper.el-dropdown__popper {
  min-width: 190px;
  transform-origin: center top;
  z-index: 2011;
  position: absolute;
  left: 375px;
  top: 126px;
  margin: 0px;
}
.content-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  height: calc(100% - 70px);
  box-sizing: border-box;
  margin: 20px 20px 50px;
  padding: 24px;
  background: #fff;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    outline: none;
  }
  .container {
    flex: 1;
    .el {
      display: flex;
      margin: 3px;
      position: relative;
      border: 1px dashed rgba(170, 170, 170, 0.5);
      // background-color: rgba(236, 245, 255, 0.3);
      overflow: hidden;
      min-height: 50px;
      min-width: 50px;
      outline: 1px solid #fff;

      .item {
        margin-bottom: 18px;
      }

      .operate {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        display: none;
        background: #076bb0;

        .icon {
          margin: 5px 5px 0 7px;
        }
      }
      .show-operate {
        display: block;
      }
    }

    .drag-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      color: #8f959e;
      font-size: 16px;
      line-height: 20px;
      padding: 6px 12px;
      background: #f5f6f7;

      .tip-icon {
        width: 20px;
        position: relative;
        bottom: 1px;
        margin-right: 5px;
      }
    }
    .error {
      position: relative;
      border: 1px solid #f54a45;
    }
    .active {
      position: relative;
      outline: 2px solid #f56c6c;
      // border: 1px solid #f56c6c;
      //border-right: 4px solid #f56c6c;
    }
  }
}
</style>
